<template>
<div class="totalStyle datadictionary">
    <div class="tablestyle">
      <div class="titleStyle">
        <p   class="leftTitle font_w">客户满意度</p>
        <el-button type="primary"   @click="handleBuild">新建</el-button>
      </div>
      <div class="bottomBox">
        <div class="searchsize">
          <el-col  class="searchBox flex">
            <el-select class="w-10 m-2 mr-16 " v-model="modeldata.searchValue.deptId" clearable  placeholder="请选择单位">
                              <el-option
                              v-for="item in modeldata.dropdown.deptIdList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                              />
                </el-select> 

            <span class="dateInput">
                    <el-date-picker
                        class="mr-16"
                        v-model="modeldata.searchValue.year"
                        type="year"
                        placeholder="请选择年份"
                        />
            </span>
             <el-select class="w-10 m-2 mr-16 " v-model="modeldata.searchValue.quarter" clearable  placeholder="请选择季度">
                              <el-option
                              v-for="item in modeldata.dropdown.quarterList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                              />
                </el-select> 
            <el-button type="info" plain  @click="reset"
            >重置</el-button>
            <el-button type="primary" plain  @click="queryTableData"
            >查询</el-button>
          </el-col>
        </div>
        <div class="chartstyle">
          <el-table
            :data="modeldata.table.tableData"
            :header-cell-style="{ background: '#F2F5FA' }"     
            border
            style="width: 100%"
          > 
            <el-table-column prop="deptName"   label="单位" min-width="10%" />
            <el-table-column prop="year"   label="年份" min-width="10%" />
            <el-table-column prop="quarter"   label="季度" min-width="10%" />
            <el-table-column prop="satisfy"   label="客户满意度（%）" min-width="10%" />
            <el-table-column prop="growth"   label="同比（%）" min-width="10%" />
            <!-- <el-table-column prop="violatingUnits"   label="环比" min-width="10%" /> -->
            <el-table-column prop="createUser" label= '添加人'  min-width="10%" />
            <el-table-column prop="createTime" label= '添加时间'  min-width="10%" />
            <el-table-column label="操作列" width="150" min-width="28%">
              <template #default="scope">
                  <span class="buttonFun cursor" @click="handleEdit(scope.$index, scope.row)">编辑</span>
                  <el-popconfirm 
                        width="520"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        @confirm="handleDelete(scope.$index, scope.row)"
                        title="你确定要删除这条数据吗?">
                        <template #reference>
                        <span class="buttonFun cursor">删除</span>
                        </template>
                  </el-popconfirm>
              </template>
            </el-table-column>
            <template #empty>
                <el-empty v-loading="modeldata.table.tableLoading"></el-empty>
            </template>
          </el-table>
          <div class="demo-pagination-block">
            <el-pagination
              :pageIndex="modeldata.table.pageIndex"
              :page-size="modeldata.table.pageSize"
              :page-sizes="[5, 10, 15, 20]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="modeldata.table.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
  </div>
  <Dialog
      v-model="modeldata.dialog.dialogEditVisible"
      :dialogFormVisible="modeldata.dialog.dialogEditVisible"
      :dialogTitle="modeldata.dialog.title"
      :dialogTableValue="modeldata.dialog.formData"
      :ruleTypeOptions = 'modeldata.dropdown.ruleTypeOptions'
  ></Dialog>
</div>

</template>
<script setup>
import Dialog from "./editdialog.vue";
import { onBeforeMount, watch, getCurrentInstance } from "vue";
import { reactive, ref, markRaw} from "vue";
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
import { Delete } from "@element-plus/icons-vue";
import store from '@/store'
import { securityviolationsList as securityviolationsList,securityviolationsRemove as securityviolationsRemove} from '@/api/user.js'
import {onMounted} from 'vue';
import { useRouter } from 'vue-router';
import {getSatisfyList as getSatisfyList,delSatisfy as delSatisfy} from "@/api/user";
const router = useRouter();
const editDataRef = ref('');
const addform = ref('')
let modeldata =  reactive({
    dialogimgVisible:false,
    searchValue:{
      deptId:'',
      year:'',
      quarter:''
    },
    dropdown:{
      quarterList:[
          {
              label: '一季度',
              value: '一季度'
          },{
              label: '二季度',
              value: '二季度'
          },{
              label: '三季度',
              value: '三季度'
          },{
              label: '四季度',
              value: '四季度'
          }
      ],
      deptIdList:[
          {
              label: '油品',
              value: 1
          },{
              label: 'LPG',
              value: 2
          },{
              label: '散杂货',
              value: 3
          }
      ]
    },
    detail:{
      name:'明细',
      isShow: false,
      parentId:0
    },
    dialog: {
      dialogEditVisible:false,
      title:'新增',
      formData:{
      },
    },
    table:{
        tableLoading: false,
        pageIndex: 1,
        pageSize: 10,
        total:0,
        tableData: [],
    }
})
const queryTableData = () => {
    modeldata.table.tableLoading = true;
    let obj = JSON.parse(JSON.stringify(modeldata.searchValue))
    obj.year = obj.year&& new Date(obj.year).getFullYear()? new Date(obj.year).getFullYear():'';
    obj.pageIndex = modeldata.table.pageIndex
    obj.pageSize = modeldata.table.pageSize
  getSatisfyList(obj)
    .then((res)=>{
      modeldata.table.tableLoading = false;
      if(res.code == 200){
            let data = res.body;
            modeldata.table.tableData=data&&data?data.data:[];
            modeldata.table.total = data&&data.total?data.total:0;
        }else{
            ElNotification({
              title: '警告',
              message: res.message?res.message:'服务器异常',
              type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008){
                    store.dispatch('app/logout')
                }
        }
    })
    .catch(()=>{})
};

watch(
    () => modeldata.dialog.dialogEditVisible,
    () => {
      if(!modeldata.dialog.dialogEditVisible){
        queryTableData();
      }
    },
    { deep: true, immediate: true }
)

//切换一页显示多少条数据
const handleSizeChange = (val) => {
  modeldata.table.pageSize = val;
  queryTableData();
};
// 点击跳转到第几页
const handleCurrentChange = (val) => {
  modeldata.table.pageIndex = val;
  queryTableData();
};
const reset = () => {
    modeldata.searchValue = {}
    queryTableData();
}
//新建
const handleBuild = () => {
  modeldata.dialog.title = "新建";
  modeldata.dialog.dialogEditVisible = true;
  modeldata.dialog.formData.id = "0";
};
//编辑
const handleEdit = (index, row) => {
  modeldata.dialog.title =   "编辑";
  modeldata.dialog.formData = JSON.parse(JSON.stringify(row));
  modeldata.dialog.dialogEditVisible = true;
};
//删除
const handleDelete = (index, row) => {
  delSatisfy(row.id).then((res)=>{
        if(res.code === 200){
            if(modeldata.table.tableData.length === 0&& modeldata.table.pageIndex>1){
              modeldata.table.pageIndex = modeldata.table.pageIndex -1;
            }
            queryTableData();
            ElMessage({
              type: "success",
              message: "删除成功",
            });
        }else{
            ElNotification({
              title: '警告',
              message: res.message?res.message:'服务器异常',
              type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008){
                    store.dispatch('app/logout')
                }
        }
      })
};

</script>
<style  lang = 'less' scoped>
.datadictionary{
  .inputBox{
    :deep(.el-input){
      width: 300px;
    }
  }
    :deep(.el-table--fit){
      height:100%;
    }
    :deep(.el-table__body-wrapper) {
      overflow-y: auto;
    }
    .tablestyle {
      position: relative;
      :deep(.el-table__header thead tr) {
        background-color: rgba(64, 158, 255, 0.1);
      }
      :deep(.el-col-3 ){
        max-width: none;
      }
    }

    .demo-pagination-block {
      margin-top: 16px;
      position: absolute;
      bottom: 32px;
      right: 32px;
    }
    .dialogBox{
          :deep(.el-form--inline .el-form-item){
              width: 100%;
          }
          :deep(.el-input){
                width: 100%;
            }
          :deep(.el-form-item--default .el-form-item__content){
            width: calc(100% - 80px);
        }
          :deep(.el-dialog__header) {
            border-bottom: 1px solid #cccccc;
            padding: 16px;
            margin-right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          :deep(.el-dialog__title) {
            color: #1C222C;
            font-size: 20px;
            width: 100px;
          }
          :deep(.el-dialog__headerbtn ){
            position: static;
            top: 0px;
            right: 0;
            padding: 0;
            width: auto;
            height: auto;
          }
    }

    .totalStyle{
        height: 100%;
    }

.split{
    width: 1px;
    height: 20px;
    background-color: #DADFE6;
    margin: 0 16px;
}
    .callback{
        cursor: pointer;
    }
}
</style>